<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            background-color: #00AFFA;
            height: 50px;
            line-height: 50px;
        }
        .top p:nth-of-type(1){
            float: left;
            color: white;
            font-size: 20px;
            margin-left: 42px;
        }
        .top p:nth-of-type(2){
            float: right;
        }
        .top p:nth-of-type(3){
            float: right;
        }
        .box .left{
            float: left;
            width:200px;
        }
        .box .left ul{
            background-color: #1C436B;
            color: white;
            width: 200px;
            height: 800px;
            text-align: center;
        }
        .box .left li{
            height: 50px;
            line-height: 50px;
        }
        .box  .right{
            float: left;
            width:88%;
        }
      
        .box .right .head {
            height: 50px;
            width: 100%;
            line-height: 50px;
        }
        .box .right .center{
            display: flex;
            justify-content: space-around;
        }
        .box .right .center div{
            width: 300px;
            height: 100px;
            background-color: #00C3FF;
            padding-top: 10px;
            padding-left: 20px;
            position: relative;
        }
        
        .box .right .center div p:nth-of-type(3){
            background-color: #00D6FF;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            position: absolute;
            right: 7%;
            top: 9%;
        }
        .right .body div{
            width: 693px;
            height: 400px;
        }
        .right .body{
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .right .foot{
            width: 1400px;
            height: 300px;
        }
        .right .foot table{
            width: 100%;
            text-align: center;
            line-height: 40px;
            border-collapse: collapse;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <p>后台管理系统</p>
            <p>角色:管理员</p>
            <p>当前用户: bootstrap中文</p>
        </div>
        <div class="left">
            <ul>
                <li>后台首页</li>
                <li>设计元素</li>
                <li>表单元素</li>
                <li>示例页面</li>
                <li>常用列表</li>
                <li>脚本插件</li>
                <li>统计图表</li>
            </ul>
        </div>
        <div class="right">
            <div class="head">
                <p style="float: left;"><<</p>
                <p style="float: left;">欢迎首页</p>
                <p style="float: right;">页签操作</p>
                <p style="float: right;">>></p>
            </div>
            <div class="center">
                <div>
                    <p style="color: white;  font-size: 14px; ">今日收入</p>
                    <p style="color: white;  font-size: 20px; margin-top: 10px;">100,000.00</p>
                    <p ></p>
                </div>
                <div style="background-color: #00AFFC;">
                    <p style="color: white;  font-size: 14px; ">今日收入</p>
                    <p style="color: white;  font-size: 20px; margin-top: 10px;">100,000.00</p>
                    <p ></p>
                </div>
                <div style="background-color: #00E16E;">
                    <p style="color: white;  font-size: 14px; ">今日收入</p>
                    <p style="color: white;  font-size: 20px; margin-top: 10px;">100,000.00</p>
                    <p ></p>
                </div>
                <div style="background-color: #8F9179;">
                    <p style="color: white;  font-size: 14px; ">今日收入</p>
                    <p style="color: white;  font-size: 20px; margin-top: 10px;">100,000.00</p>
                    <p ></p>
                </div>
                
            </div>
            <div class="body">
                <div class="zhutu"></div>
                <div class="xiantu"></div>
            </div>
            <div class="foot">
                <table>
                    <thead>
                        <tr style="font-weight: bold;border-bottom: 1px solid #ccc;">
                            <td style="width: 200px;">#</td>
                            <td>订单号</td>
                            <td>商品名称</td>
                            <td>下单日期</td>
                            <td>状态</td>
                            <td>处理情况</td>
                        </tr>
                    </thead>
                  
                    <tbody>
                        
                    </tbody>
                  </table>
            </div>
        </div>
    </div>
</body>
</html>
<script src="./render.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="./promise请求.js"></script>

<!-- <script src="./data.json"></script> -->
<script>
    var myChart = echarts.init(document.querySelector('.zhutu'));
   //柱状图
   option = {
     title: {
          text: '每月收入',
     },
    
     legend: {
        top:'5px',
      
        //  x:'right', // 默认在上面，
         orient: 'horizontal', //  默认横排显示
         data: ['This week', 'Last week']
     },
     xAxis: [{
         type: 'category',
         data:  ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
     }],
     
     yAxis: [{
       
     }],
     
     series: [{
         name: 'This week',
         type: 'bar',
         smooth:true,
         data: [2500, 1600, 1700, 3400, 4600, 3450, 1800,2500,2300,1900,3800,1750],
         
        
     }, {
         name: 'Last week',
         type: 'bar',
         smooth:true,
         data: [2000, 1600, 1800, 3000, 4000, 3600, 600,2000,2700,2100,3700,3600],
     }],
     itemstyle:{
          normal:{
            color:'orange'
          }
         }
 };

myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: 0
    })
   myChart.setOption(option);
//曲线图
   var myChart1 = echarts.init(document.querySelector('.xiantu'));
   option = {
     title: {
         text: '每年收入走势'
     },
    
     legend: {
       top:'5px',
        //  x:'right', // 默认在上面，
         orient: 'horizontal', //  默认横排显示
         data: ['This week', 'Last week']
     },
     xAxis: [{
         type: 'category',
         data: ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2015', '2016', '2017', '2018', '2019', '2020' ]
     }],
     
     yAxis: [{
       
     }],
     
     series: [{
         name: 'This week',
         type: 'line',
         smooth:true,
         data: [50, 55, 60, 40, 45, 40, 40,65,40,68,20,72,60],
         
        
     }, {
         name: 'Last week',
         type: 'line',
         smooth:true,
         data: [48, 50, 52, 48, 40, 35, 40,65,45,58,30,72,58]
     }],
     itemstyle:{
          normal:{
            color:'orange'
          }
         }
 };
   myChart1.setOption(option);
 

   render()          
            
        
</script>